<template>
  <div class="denglu">
    <div class="header">密码登录</div>
    <div class="ip">
      <input class="login" type="text"  placeholder="用户名/电话" v-model="inputlogin"/><br />
      <input class="pass" type="password" placeholder="密码" v-model="inputpass"/>
    </div>
    <div class="btn" @click="btn()">登录</div>
    <div class="button"><span>手机号登录</span><span>忘记密码</span></div>
 <div class="xy">
    <input type="checkbox" name="" id="">
     <div class="xieyi">
         <span class="yuedu">已阅读并同意</span>
         《用户服务协议》丶《隐私政策》
     </div>
    </div>
 <!-- 手机号输入框
<div class="login_box">
    <input type="number" placeholder="请输入手机号" class="phoneInput" v-model="mobile"/>
    <span v-if="codeShow" style="color:red;" @click="getPhoneCode">获取验证码</span>
倒计时
    <span v-if="!codeShow" class="count">{{count}}秒后重试</span>
</div> -->
  </div>

</template>

<script>

import { user_login } from "../../../api/index";
export default {
  data() {
    return {
      inputlogin: "",
      inputpass: "",
      token:'',
      id:""
    };
  },
  methods: {
    btn() {
      console.log(this.inputlogin, this.inputpass);
      user_login({ phone: this.inputlogin, pass: this.inputpass }).then(
        (res) => {
              console.log(res)
          // this.id=res.data.userinfo.id
          // console.log(res.data)
         localStorage.setItem('token',res.data.token);
         localStorage.setItem("userid",res.data.userinfo.id)
         if(res.data.code==200){
          this.$router.push("/Index/shouye")
         }
        }
      );
    },
  },
};
</script>

<style>
.header {
  width: 100%;
  height: 40px;
  margin-top: 100px;
  font-size: 25px;
}
.ip {
  margin-top: 40px;
}
.login, 
.pass{
  width: 100%;
  height: 60px;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom:2px solid #e5e5e5 ;
  outline: none;
}
.btn {
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: #999999;
  background: #e0e0e0;
  text-align: center;
  border-radius: 30px;
  margin:20px 0;
  
}
.button {
  display: flex;
  justify-content: space-between;
  color: #4ca9ea;
}
.xy{
    display: flex;
    margin-top: 150px;
}
.yuedu{
    width: 16px;
    height: 16px;
    border-radius:50% ;
}
.xieyi{
    color: #4ca9ea;
    margin-left: 20px;
}
.xieyi span{
    color: #999999;
}
</style>